<template>
	<view class="">
		<uni-section title="账号注册" type="line">
			<view class="example">
				<!-- 自定义表单校验 -->
				<uni-forms ref="userForm" :rules="customRules" :modelValue="formData" :label-width="90"
					validateTrigger="blur">
					<uni-forms-item label="姓名" required name="nickname">
						<uni-easyinput v-model="formData.nickname" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="身份证号码" name="username" required>
						<uni-easyinput v-model="formData.username" placeholder="请输入身份证号码" />
					</uni-forms-item>
					<uni-forms-item label="手机号码" required name="phone">
						<uni-easyinput v-model="formData.phone" placeholder="请输入手机号码" />
					</uni-forms-item>
					<uni-forms-item label="操作项目" required name="opc">
						<uni-data-picker :map="mapPicker" placeholder="请选择操作项目" popup-title="请选择操作项目"
							:localdata="dataTree" v-model="formData.opc" @change="onchange">
						</uni-data-picker>
					</uni-forms-item>
				</uni-forms>
				<button type="primary" @click="submit('userForm')">提交</button>
			</view>
		</uni-section>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog type="message" :showClose="false" confirmText="已知晓" title="注册成功" @confirm="dialogConfirm">
				<view class="">
					<view style="font-size: 32rpx;">账号： <text style="color: #f00;font-weight: 700;">身份证号码</text></view>
					<view style="font-size: 32rpx;">密码： <text style="color: #f00;font-weight: 700;">123456</text></view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>`

<script>
	import {
		register
	} from '@/api/index.js'
	import {
		isIdCard
	} from '@/utils/index.js'
	export default {
		data() {
			return {
				id: '',
				mapPicker: {
					text: 'label',
					value: 'value'
				},
				dataTree: [{
						"value": "0301",
						"label": "电工作业",
						"children": [{
								"value": "030102",
								"label": "低压电工作业"
							},
							{
								"value": "030101",
								"label": "高压电工作业"
							}
						]
					},
					{
						"value": "0303",
						"label": "高处作业",
						"children": [{
								"value": "030302",
								"label": "高处安装、维护、拆除作业"
							},
							{
								"value": "030301",
								"label": "登高架设作业"
							}
						]
					},
					{
						"value": "0302",
						"label": "焊接与热切割作业",
						"children": [{
							"value": "030201",
							"label": "熔化焊接与热切割作业"
						}]
					}
				],
				formData: {
					username: '',
					nickname: '',
					phone: '',
					opc: '',
				},
				customRules: {
					username: {
						rules: [{
								required: true,
								errorMessage: '身份证号码不能为空',
								trigger: 'blur',
							}, {
								validateFunction: (rule, value, data, callback) => {
									return new Promise((resolve, reject) => {
										try {
											isIdCard(value)
											resolve()
										} catch (error) {
											reject(error)
										}
									})
								}
							},
							// validateTrigger: 'blur'
						]
					},
					opc: {
						rules: [{
							required: true,
							errorMessage: '操作项目没选择'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空'
						}, {
							format: 'number',
							errorMessage: '手机号码不对'
						}]
					},
					nickname: {
						rules: [{
							required: true,
							minimum: 1,
							errorMessage: '姓名填写错误'

						}]
					}
				}
			}
		},
		onLoad(val) {
			uni.getStorage({
				key: 'id',
				success: (res) => {
					this.id = res.data
				}
			})
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs['userForm'].setRules(this.customRules)
		},
		methods: {
			submit() {
				let params = {
					...this.formData,
					out: '2',
					charge: this.id == 1 ? '中-文' : ''
				}
				this.$refs['userForm'].validate().then(res => {
					register(params).then(res => {
						this.$refs.popup.open()
						// uni.showModal({
						// 	title: '注册成功',
						// 	content: '注册成功请重新登录',
						// 	confirmText: '去登录',
						// 	showCancel: false,
						// 	success: (res) => {
						// 		if (res.confirm) {

						// 		}
						// 	}
						// });
					})
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: `填写错误`
					})
				})

			},
			dialogConfirm() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			onchange(item) {
				this.formData.opc = item.detail.value.slice(-1)[0].value
				this.formData.opcName = item.detail.value.slice(-1)[0].text
				this.formData.opp = item.detail.value[0].value
				this.formData.oppName = item.detail.value[0].text
				if (this.formData.opc == '030102' || this.formData.opc == '030201' || this.formData.opc == '030302') {
					this.formData.userSub = 1,
						this.formData.remarks = '科目三'
				}
			},

		}
	}
</script>

<style lang="less" scoped>
	.example {
		padding: 0 30rpx;
	}
</style>